<template>
  <div>
    <div>
      <van-nav-bar title="我的圈子" left-text="返回" @click-left="onClickLeft" left-arrow />
    </div>

    <div>
      <van-tabs v-model="active" @change="changeTab">
        <van-tab title="我的发布">
          <div
            style="background-color: white; margin-top: 10px"
            v-for="item in shareInfoList"
            :key="item.shareid"
            @click="viewdetail(item)"
          >
            <div class="columnr">
              <div class="rownr">
                <div class="content">
                  {{ item.content }}
                </div>
                <div style="width: 20%; padding-top: 10px">
                  <van-image width="60" height="40" :src="item.images ? item.images[0] : ''" />
                </div>
              </div>
              <div class="rownr">
                <div style="width: 25%; align-content: center; padding-left: 8%; font-size: 14px">
                  <van-icon name="eye-o" /> {{ item.readnum }}
                </div>
                <div style="width: 25%; align-content: center; padding-left: 8%; font-size: 14px">
                  <van-icon name="star-o" /> {{ item.scnum }}
                </div>
                <div style="width: 25%; align-content: center; padding-left: 8%; font-size: 14px">
                  <van-icon name="chat-o" /> {{ item.lynum }}
                </div>
                <div style="width: 25%; align-content: center; padding-left: 8%; font-size: 14px">
                  <van-icon name="good-job-o" /> {{ item.dznum }}
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="我的收藏">
          <div
            style="background-color: white; margin-top: 10px"
            v-for="item in shareInfoList"
            :key="item.shareid"
            @click="viewdetail(item)"
          >
            <div class="columnr">
              <div class="rownr">
                <div class="content">
                  {{ item.content }}
                </div>
                <div style="width: 20%; padding-top: 10px">
                  <van-image width="60" height="40" :src="item.images ? item.images[0] : ''" />
                </div>
              </div>
              <div class="rownr">
                <div style="width: 25%; align-content: center; padding-left: 8%; font-size: 14px">
                  <van-icon name="eye-o" /> {{ item.readnum }}
                </div>
                <div style="width: 25%; align-content: center; padding-left: 8%; font-size: 14px">
                  <van-icon name="star-o" /> {{ item.scnum }}
                </div>
                <div style="width: 25%; align-content: center; padding-left: 8%; font-size: 14px">
                  <van-icon name="chat-o" /> {{ item.lynum }}
                </div>
                <div style="width: 25%; align-content: center; padding-left: 8%; font-size: 14px">
                  <van-icon name="good-job-o" /> {{ item.dznum }}
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="我的回复">
          <div
            style="background-color: white; margin-top: 10px"
            v-for="item in shareInfoList"
            :key="item.shareid"
            @click="viewdetail(item)"
          >
            <div class="columnr">
              <div class="rownr">
                <div class="content">
                  {{ item.content }}
                </div>
                <div style="width: 20%; padding-top: 10px">
                  <van-image width="60" height="40" :src="item.images ? item.images[0] : ''" />
                </div>
              </div>
              <div class="rownr">
                <div style="width: 25%; align-content: center; padding-left: 8%; font-size: 14px">
                  <van-icon name="eye-o" /> {{ item.readnum }}
                </div>
                <div style="width: 25%; align-content: center; padding-left: 8%; font-size: 14px">
                  <van-icon name="star-o" /> {{ item.scnum }}
                </div>
                <div style="width: 25%; align-content: center; padding-left: 8%; font-size: 14px">
                  <van-icon name="chat-o" /> {{ item.lynum }}
                </div>
                <div style="width: 25%; align-content: center; padding-left: 8%; font-size: 14px">
                  <van-icon name="good-job-o" /> {{ item.dznum }}
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { queryHasMyLyShareInfo, queryMySharedInfo, queryMyStoredShareInfo } from 'api/api'
export default {
  name: 'myquanzi',
  data() {
    return {
      active: 0,
      shareInfoList: [],
      agencyid: ''
    }
  },
  created() {
    const agencyIdStore = this.$store.getters.agencyId
    this.agencyid = agencyIdStore
    this.changeTab(0)
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1) // 返回上一层
    },

    changeTab(e) {
      this.active = e
      const param = { agencyid: this.agencyid }
      const list = []
      if (e == 0) {
        queryMySharedInfo(param).then(res => {
          if (res.code == 200) {
            console.log(res.rows)
            if (res.rows) {
              let lenth = res.rows.length
              for (var i = 0; i < lenth; i++) {
                if (res.rows[i].images) {
                  res.rows[i].images = res.rows[i].images.split(',')
                }
                if (res.rows[i].fbsj) {
                  res.rows[i].fbsj = res.rows[i].fbsj.replace('T', ' ').replace('.000+0800', ' ')
                }
                if (res.rows[i].content) {
                  res.rows[i].content = res.rows[i].content.substring(0, 30) + '.....'
                }
                list.push(res.rows[i])
              }
            }
            this.shareInfoList = list
          }
        })
      }

      if (e == 1) {
        queryMyStoredShareInfo(param).then(res => {
          if (res.code == 200) {
            console.log(res.rows)
            if (res.rows) {
              let lenth = res.rows.length
              for (var i = 0; i < lenth; i++) {
                if (res.rows[i].images) {
                  res.rows[i].images = res.rows[i].images.split(',')
                }
                res.rows[i].fbsj = res.rows[i].fbsj.replace('T', ' ').replace('.000+0800', ' ')
                res.rows[i].content = res.rows[i].content.substring(0, 30) + '.....'
                list.push(res.rows[i])
              }
            }
            this.shareInfoList = list
          }
        })
      }

      if (e == 2) {
        queryHasMyLyShareInfo(param).then(res => {
          if (res.code == 200) {
            console.log(res.rows)
            if (res.rows) {
              let lenth = res.rows.length
              for (var i = 0; i < lenth; i++) {
                if (res.rows[i].images) {
                  res.rows[i].images = res.rows[i].images.split(',')
                }
                res.rows[i].fbsj = res.rows[i].fbsj.replace('T', ' ').replace('.000+0800', ' ')
                res.rows[i].content = res.rows[i].content.substring(0, 30) + '.....'
                list.push(res.rows[i])
              }
            }
            this.shareInfoList = list
          }
        })
      }
    },

    viewdetail(item) {
      let shareid = item.shareid
      this.$router.push({ path: '/fbinfo', query: { shareid: shareid } })
    }
  }
}
</script>

<style scoped>
.container {
  background-color: white;
}

.columnr {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.rownr {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.content {
  font-size: 16px;
  padding: 10px;
  width: 80%;
}
</style>
